<template>
  <div>
    <div id="bar" style="height: 420px" />
  </div>
</template>
<script>
import echarts from "echarts";
import { barechartAPI } from "@/api/ds/productOrder";
export default {
  data() {
    return {};
  },
  props: {
    chartData: {
      type: Object,
    },
  },
  created() {
    // this.getinfo()
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      var datalist = [
        { name: "总事业", value: this.chartData.queryTotalPerformance },
        { name: "总贡献值", value: this.chartData.userMoney.allmoney },
        { name: "总消费积分", value: this.chartData.totalConsumptionPoints },
        { name: "总GTFY", value: this.chartData.totalGtfy },
        { name: "总提现", value: this.chartData.gtfyWithdrawal },
        {
          name: "总金额",
          value:
            Number.parseFloat(this.chartData.queryTotalPerformance) -
            Number.parseFloat(this.chartData.totalActualPaymentAmount),
        },
        //  按照格式 name为x轴名称，value为对应的数据
      ];
      this.showchart(datalist);
    },

    getinfo() {
      barechartAPI().then((res) => {
        var data = res.data[0];
        /*
        queryTotalPerformance: null,//查询总业绩
performanceOfTheDay: null,//查询当日业绩
totalCashSales: null,//查询现金销售总金额
totalCashSalesTheDay: null,//查询当日现金销售总金额
userMoney: null,//查询贡献值总量
userMoneyTheDay: null,//查询当日新增贡献值
totalConsumptionPoints: null,//查询释放消费积分总量
totalConsumptionPointsTheDay: null,//查询当日释放消费积分总量
totalContributionValue: null,//查询贡献值总量
totalContributionValueTheDay: null,//查询当日新增贡献值
totalGtfy: null,//查询当日释放的gtfy总量
totalGtfyTheDay: null,//查询当日释放的gtfy总量
totalAccelerate: null,//查询当日释分红加速总量
totalAccelerateTheDay: null,//查询当日释放分红加速总量
gtfyWithdrawal:null,//查询释分红加速总量
gtfyWithdrawalTheDay: null,//查询当日gtfy提现*/

        var datalist = [
          { name: "总事业", value: data.queryTotalPerformance },
          { name: "总贡献值", value: data.userMoney.allmoney },
          { name: "总消费积分", value: data.totalConsumptionPoints },
          { name: "总GTFY", value: data.totalGtfy },
          { name: "总提现", value: data.gtfyWithdrawal },
          {
            name: "总金额",
            value:
              Number.parseFloat(data.queryTotalPerformance) -
              Number.parseFloat(data.totalActualPaymentAmount),
          },
          //  按照格式 name为x轴名称，value为对应的数据
        ];
        this.showchart(datalist);
      });
    },
    showchart(datalist) {
      var xlist = [],
        ylist = [];
      for (const key in datalist) {
        xlist.push(datalist[key].name);
        ylist.push(datalist[key].value);
      }
      var chartDom = document.getElementById("bar");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xlist,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data: ylist,
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
<style></style>
